<template>
  <div>
    <div class="register">
      <div class="back"></div>
      <div class="wenzi">
        <div class="img">
          <img src="../assets/img/baidu.png" height="40" alt="" />
        </div>
        <div class="texts">
          <h2>用科技</h2>
          <p>让复杂的世界更简单</p>
        </div>
        <div class="help">
          <a href="#">帮助中心</a>
          <span>|</span>
          <a href="#"></a>
          <span>2022 ©Baidu</span>
        </div>
      </div>
      <div class="register-son">
        <div class="hy">
          <h3>欢迎注册</h3>
          <p>
            已有账号? &nbsp;<router-link to="signinView" tag="a"
              >登录</router-link
            >
          </p>
        </div>
        <div class="son">
          <div class="shuruk">
            <span class="titles">用户名</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="设置后不可更改，中英文均可，不可以超过8位"
              placement="top"
            >
              <el-button>
                <div :class="['inputs', { con: baocuo1Flag }]">
                  <input
                    type="text"
                    placeholder="请设置用户名"
                    v-model="userName"
                    @input="toUserName"
                  />
                </div>
              </el-button>
            </el-tooltip>
            <span class="baocuo">{{ baocuo1 }}</span>
          </div>

          <div class="shuruk">
            <span class="titles">手机号</span>
            <div :class="['inputs', { con: baocuo2Flag }]">
              <input
                type="text"
                placeholder="可用于登录或找回密码"
                v-model="telephone"
                @change="toTelephone"
              />
            </div>
            <span class="baocuo">{{ baocuo2 }}</span>
          </div>

          <div class="shuruk">
            <span class="titles">密&nbsp;&nbsp;&nbsp;码</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                长度为8~14个字符<br />字母/数字以及标点符号至少包含两种<br />不允许有空格中文
              </div>
              <el-button>
                <div :class="['inputs', { con: baocuo3Flag }]">
                  <input
                    type="text"
                    placeholder="请设置登录密码"
                    v-model="password"
                    @input="toPassword"
                  />
                </div>
              </el-button>
            </el-tooltip>
            <span class="baocuo">{{ baocuo3 }}</span>
          </div>

          <div class="yzm">
            <span>验证码</span>
            <div class="input">
              <input
                type="text"
                placeholder="请输入验证码"
                v-model="verification"
                @change="yanzheng"
              />
            </div>
            <span class="baocuoyam">{{ baocuoyam }}</span>
            <el-button plain @click="obtain" :class="{ 'btn-con': btnFalse }">
              {{ yzms }}
            </el-button>
          </div>
          <div class="btns">
            <input type="submit" @click="register" value="注册" />
          </div>
          <div class="xieyi">
            <input type="checkbox" v-model="agreement" />阅读并接受<a href="#"
              >《百度用户协议》</a
            >、<a href="#">《儿童个人信息保护声明》</a>及<a href="#"
              >《百度隐私权保护声明》</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      telephone: "",
      password: "",
      verification: "",

      baocuo1: "",
      baocuo1Flag: false,
      baocuo2: "",
      baocuo2Flag: false,
      baocuo3: "",
      baocuo3Flag: false,

      verificationCode: "",
      yzms: "获取验证码",
      btnFalse: false,
      baocuoyam: "",

      agreement: false,
      userLists: [],
    };
  },
  methods: {
    // 用户名
    toUserName() {
      if (this.userName.length > 8) {
        this.baocuo1 = "用户名不得超过8个字符";
        this.baocuo1Flag = true;
      } else {
        this.baocuo1 = "";
        this.baocuo1Flag = false;
      }
    },

    // 电话号码
    toTelephone() {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.telephone)) {
        this.baocuo2 = "手机号格式不正确";
        this.baocuo2Flag = true;
      } else {
        this.baocuo2 = "";
        this.baocuo2Flag = false;
      }
    },

    // 密码
    toPassword() {
      // 1.密码必须由字母、数字组成，区分大小写
      // 2.密码长度为8-18位
      let reg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,14}$/;
      if (!reg.test(this.password)) {
        this.baocuo3 = "密码格式不对";
        this.baocuo3Flag = true;
      } else {
        this.baocuo3 = "";
        this.baocuo3Flag = false;
      }
    },

    // 获取验证码
    obtain() {
      if (this.telephone == "") {
        const h = this.$createElement;
        this.$notify({
          title: "警告",
          message: h("i", { style: "color: teal" }, "没有输入手机号码哦"),
        });
      } else {
        this.btnFalse = true;
        this.yzms = 60;
        for (var i = 0; i < 6; i++) {
          this.verificationCode += Math.floor(Math.random() * 10);
        }
        console.log(this.verificationCode);
        var times = setInterval(() => {
          this.yzms -= 1;
          if (this.yzms == 0) {
            clearInterval(times);
            this.yzms = "获取验证码";
            this.btnFalse = false;
          }
        }, 1000);
      }
    },

    // 验证验证码
    yanzheng() {
      if (this.verification != this.verificationCode) {
        this.baocuoyam = "验证码错误";
      } else {
        this.baocuoyam = "";
      }
    },

    // 注册
    register() {
      if (
        this.agreement &&
        this.userName != "" &&
        this.telephone != "" &&
        this.password != "" &&
        this.verification != ""
      ) {
        if (
          this.baocuo1 == "" &&
          this.baocuo2 == "" &&
          this.baocuo3 == "" &&
          this.baocuoyam == ""
        ) {
          this.$message({
            message: "恭喜你，注册成功",
            type: "success",
          });
          this.userLists.push({
            username: this.userName,
            telephone: this.telephone,
            password: this.password,
          });
          window.localStorage.setItem(
            "userLists",
            JSON.stringify(this.userLists)
          );
          this.$router.push("signinView")
        } else {
          this.$message({
            message: "输入的信息不符合要求",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请填写完注册信息",
          type: "warning",
        });
      }
    },
  },

  created() {
    if (localStorage.userLists) {
      this.userLists = JSON.parse(window.localStorage.getItem("userLists"));
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/register.scss";
</style>